<template>
    <div class="screen-header">
        <div class="menu" @click="toggle">
            <img :src="icons.menu" alt="">
        </div>
        <div class="screen-left">
            <div class="logo">大数据可视化平台</div>
            <div class="search-wrap">
                <input type="text" placeholder="搜索" @input="search">
            </div>
        </div>
        <div class="screen-content">
            <div class="screen-tabs">
                 <div class="tab-item" :class="{active:tabItem.active}" v-for="tabItem in tabs" :key="tabItem.name" @click.stop="_tabs(tabItem)">
                    <span v-text="tabItem.name"></span>
                 </div>
            </div>
            <div class="screen-module">
                <div class="timer">
                    <Icon type="md-time" />
                    <span class="clock" v-text="timer"> </span>
                </div>

                <div class="drawer-btns"  v-if="visible" @click.stop="drawer">
                    <Icon type="md-podium" />
                    <span class="name">显示信息</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import delegate from '../js/event.js';
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            icons:{
                menu:require('./menu.png')
            },
            tabs: [
                {
                    name:'技术动态',
                    navigator:'technology',
                    active:true,
                },
                {
                    name:'机构动态',
                    navigator:'organization',
                    active:false,
                },
                {
                    name:'专家动态',
                    navigator:'expert',
                    active:false,
                },
            ],
            timer: new Date().Format('yyyy-MM-dd hh:mm:ss'),
            visible:true,
        }
    },
    computed: {
        ...mapGetters(['navVisible'])
    },
    created(){
      this.tabs.forEach(item => {
         if(this.$route.path.indexOf(item.navigator) >= 0){
           item.active = true
         }else{
           item.active = false
         }
      })
    },
    mounted(){
        // 调用时间定时器
        this._timer();

        // 显示抽屉
        delegate.$on('drawer-show',()=>{
            this.visible = true
        })

        // 关闭抽屉
        delegate.$on('drawer-hide',()=>{
             this.visible = false
        })
    },
    methods: {
        _timer() {
            window.setTimeout(()=>{
                this.timer = new Date().Format('yyyy-MM-dd hh:mm:ss')
                this._timer();
            },1000)
        },
        _tabs(current){
            this.tabs.forEach(item => {
                item.active = false;
            })
            current.active = true;
            this.$router.replace(current.navigator);
        },
        search(e){
            delegate.$emit('s-search',e.target.value);
        }
        ,
        drawer(e){
            delegate.$emit('s-drawer',e);
        },
        toggle(){
            this.$store.commit('SET_NAVVISIBLE',!this.navVisible);
        }
    },

}
</script>
<style lang="scss">
    @media screen{
           .screen-header{
                user-select: none;
                display: flex;
                height: 60px;
                min-width: 1340px;
                background: linear-gradient(90deg, #005fff 200px, #073b74);
                @media (max-width: 1920px ){
                    height: 50px;
                }
                @media (max-width: 1366px ){
                    height: 45px;
                }
                .menu{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex: 0 0 62px;
                    align-self: stretch;
                    background-color: #229dff;
                    cursor: pointer;
                    @media (max-width: 1920px ){
                        flex: 0 0 50px;
                    }
                    @media (max-width: 1366px ){
                        flex: 0 0 45px;
                    }
                }
                .screen-left{
                    flex: 0 0 691px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding-left: 30px;
                    .logo{
                        font-size: 28px;
                        color: #fff;
                        font-weight: 600;
                        margin-right: 34px;
                    }
                    .search-wrap{
                        position: relative;
                        width: 280px;
                        height: 40px;
                        background-color: #f4f5f6;
                        border-radius: 5px;
                        input{
                            padding: 0 14px;
                            border-radius: 5px;
                            width: 100%;
                            height: 100%;
                            appearance: none;
                            outline: none;
                            border: 0;
                            color: #333;
                            font-weight: 500;
                            font-size: 15px;
                            &::placeholder{
                                font-size: 14px !important;
                                font-weight: 400;
                                color: #999999;
                            }
                        }
                    }

                    @media (max-width: 1920px ){
                        padding-left: 18px;
                        flex: 0 0 460px;
                        .logo{
                            font-size: 20px;
                            margin-right: 20px;
                        }
                        .search-wrap{
                            width: 178px;
                            height: 36px;
                        }
                    }
                    @media (max-width: 1366px ){
                        padding-left: 18px;
                        flex: 0 0 440px;
                        .logo{
                            font-size: 18px;
                            margin-right: 18px;
                        }
                        .search-wrap{
                            width: 178px;
                            height: 33px;
                        }
                    }
                }
                .screen-content{
                    &::before{
                        position: absolute;
                        content: '';
                        width: 0;
                        height: 0;
                        left: -55px;
                        bottom: 0;
                        border-bottom: 54px solid #0b0626;
                        border-left: 55px solid transparent;
                    }
                    margin-top: 6px;
                    position: relative;
                    flex: 1;
                    background-color: #0b0626;
                    display: flex;
                    padding-top: 10px;

                    @media (max-width: 1920px ){
                        margin-top: 3px;
                        padding-top: 4px;
                        &::before{
                            border-bottom: 47px solid #0b0626;
                            border-left: 47px solid transparent;
                            left: -47px;
                        }
                    }
                    @media (max-width: 1366px ){
                        margin-top: 3px;
                        padding-top: 2px;
                        &::before{
                            border-bottom: 42px solid #0b0626;
                            border-left: 42px solid transparent;
                            left: -42px;
                        }
                    }
                }
                .screen-tabs{
                    display: flex;
                    min-width: 650px;
                    padding-left: 4px;
                    .tab-item{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: relative;
                        flex: 0 0 146px;
                        cursor: pointer;
                        background: linear-gradient(90deg,#091951,#092551);
                        margin-right: 60px;
                        &::before{
                            position: absolute;
                            content: '';
                            width: 0;
                            height: 0;
                            left: -45px;
                            bottom: 0;
                            border-bottom-width: 44px;
                            border-bottom-style: solid;
                            border-bottom-color: #091951;
                            border-left: 45px solid transparent;
                        }
                        &::after{
                            position: absolute;
                            content: '';
                            width: 0;
                            height: 0;
                            right: -45px;
                            bottom: 0;
                            border-top-width: 44px;
                            border-top-style: solid;
                            border-top-color: #092551;
                            border-right: 45px solid transparent;
                        }
                        &.active{
                            background: linear-gradient(90deg,#043fa8,#0466a8);
                            &::before{
                                border-bottom-color: #043fa8;
                            }
                            &::after{
                                border-top-color: #0466a8;
                            }
                            span{
                                color: #fff;
                            }
                        }
                        span{
                            color: #98caec;
                            font-size: 18px;
                        }
                    }

                    @media (max-width: 1920px ){
                         .tab-item{
                             flex: 0 0 130px;
                             margin-right: 50px;
                              &::before{
                                 border-bottom-width: 43px;
                                 border-left: 43px solid transparent;
                                 left: -43px;
                              }
                              &::after{
                                 border-top-width: 43px;
                                 border-right: 43px solid transparent;
                                 right:-43px;
                              }
                         }
                    }
                    @media (max-width: 1366px ){
                         .tab-item{
                             flex: 0 0 120px;
                             margin-right: 45px;
                             &::before{
                                border-bottom-width: 40px;
                                border-left: 40px solid transparent;
                                left: -40px;
                             }
                             &::after{
                                border-top-width: 40px;
                                border-right: 40px solid transparent;
                                right:-40px;
                             }
                         }
                    }
                }
                .screen-module{
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-right: 30px;
                    .timer{
                        font-size: 18px;
                        color: #47e1ff;
                        font-weight: 500;
                        .clock{
                            font-size: 14px;
                            margin-left: 10px;
                        }
                    }
                    .drawer-btns{
                        display: flex;
                        flex-direction: column;
                        font-size: 30px;
                        color: #98caec;
                        cursor: pointer;
                        align-items: center;
                        user-select: none;
                        .name{
                            font-size: 11px;
                        }
                    }
                }
       }

    }

</style>
